<script setup lang="ts">
import beginMenu from '@/assets/img/desktop/begin_menu.png'
import bing from '@/assets/img/desktop/bing.png'
import baidu from '@/assets/img/desktop/baidu.png'
import google from '@/assets/img/desktop/google.png'
import { inject, ref } from 'vue'
import { getAssetsResource } from '@/utils/resource'
import { UserConfig } from '@/views/desktop/type'
let menus = inject('bottomMenus')
let dialogVisible = inject('dialogVisible')
let searchContent = ref('')

let userConfig = inject('userConfig', ref<UserConfig>(new UserConfig()))

let menuClick = (item) => {
  dialogVisible.value[item.id] = !dialogVisible.value[item.id]
}
let searchEvent = (e) => {
  e.preventDefault()
  window.open('https://bing.com/search?q=' + searchContent.value)
}
</script>

<template>
  <div
    class="h-10 flex justify-center items-center"
    :style="{ backgroundColor: userConfig.bottomNavColor }"
  >
    <img :src="beginMenu" class="w-7 h-7" alt="开始" />
    <p class="relative flex items-center">
      <img
        :src="bing"
        class="absolute left-2 w-3 h-3 inline-block cursor-pointer"
        alt="搜索"
      />
      <input
        class="ml-1 pl-5 p-1 inline-block rounded placeholder:text-black placeholder:text-xs box-content focus:outline-blue-300 text-sm"
        placeholder="搜索"
        v-model="searchContent"
        @keyup.enter.native="searchEvent"
      />
    </p>
    <p v-for="item in menus" class="ml-3">
      <img
        :src="getAssetsResource(item.iconUrl)"
        :alt="item.name"
        class="w-9 h-9"
        @click="menuClick(item)"
      />
    </p>
  </div>
</template>

<style scoped>
.h-10 {
  height: 5%;
}
</style>
